<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="./jquery-3.2.1.js"></script>        
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:antiquewhite">
    <div class="continer">
        <div class="all">
            <div class="row">
                <div class="col-xs-12">
                 <div class="col-center-block">
                     <div class="col-center-block"><img src="爱你.jpg" class="img"></div>
                    <p class="p1">HELLO!</p>
                    <h3 class="text-center">MY NAME IS MARK<sup>93YE</sup>THIS IS MY RESUME/CV</h3>
                 </div>
                </div>
            </div>
            <div class="row" style="padding:10px 10px 10px 130px;">
                <div class="col-xs-12 col-sm-7">
                    <div class="right">
                    <p class="p3">// About me</p>
                    <P>段宜恩（Mark Tuan），艺名Mark，1993年9月4日出生于美国加利福尼亚州洛杉矶，美籍台湾华人，男子组合GOT7成员。
                       2014年1月16日，以GOT7成员身份出道；1月20日，GOT7发行首张迷你专辑《Got it？》;
                       10月22日，组合发行首张日文单曲《AROUND THE WORLD》，在日本正式出道;
                       11月18日，组合正式发行首张正规专辑《Identify》;
                       2015年1月27日，参演网络剧《Dream Knight》首播，剧中“Mark”;
                       2016年4月29日至8月30日，GOT7开启第一次世界巡回演唱会“FLY”  ;
                       9月27日，GOT7发行第二张正规专辑《FLIGHT LOG : TURBULENCE》 。
                    </P>
                    </div>
                    <div class="right">
                        <p class="p3">// Education</p>
                        <div class="row">
                            <div class="col-xs-12 col-sm-4">
                                 <ul>
                                     <li><b>1996</b></li>
                                     <li><b>2002</b></li>
                                     <li><b>2007</b></li>
                                     <li><b>2012</b></li>
                                 </ul>
                            </div>
                            <div class="col-xs-12 col-sm-8">
                                <ul>
                                    <li><p>I was born in Katowice</br>
                                           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, exercitationem, totam, dolores iste dolore est aut modi.
                                        </p>
                                    </li>
                                    <li>
                                       <p>
                                        Secondary school specializing in artistic</br>
                                        Eos, explicabo, nam, tenetur et ab eius deserunt aspernatur ipsum ducimus quibusdam quis voluptatibus.
                                       </p> 
                                    </li>
                                    <li>
                                        <p>
                                        First level graduation in Graphic Design</br>
                                        Aspernatur, mollitia, quos maxime eius suscipit sed beatae ducimus quaerat quibusdam perferendis? Iusto, quibusdam asperiores unde repellat. 
                                        </p>
                                    </li>
                                    <li>
                                        <P>
                                        Second level graduation in Graphic Design</br>
                                        Ducimus, aliquam tempore autem itaque et accusantium! 
                                        </P>
                                    </li>
                                </ul>   
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <p class="p3">// Experience</p>
                        <div class="row">
                            <div class="col-xs-12 col-sm-4">
                                <ul>
                                   <li>
                                       <br/>
                                        <h5><b>Google</b></h5>
                                        <b>2013-2014</b>
                                      
                                   </li>
                                   <li>
                                      <br/>
                                        <h5><b>Twitter</b></h5>
                                        <b>2012</b>
                                   </li> 
                                </ul>
                            </div>
                            <div class="col-xs-12 col-sm-8">
                                    <p>Front-end developer / php programmer<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, et, illum perferendis veritatis velit sunt similique qui magni totam harum tempore eius laboriosam accusantium necessitatibus voluptatum? Enim, itaque dignissimos quia</p>
                                    <br/><br/>
                                    <p>
                                    Web Developer<br>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nihil sit nemo voluptatem praesentium. Quia, qui facere consectetur libero asperiores fugiat consequuntur deserunt culpa repudiandae sed quidem voluptas explicabo soluta.
                                    </p>
                                </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-5">
                    <div class="left">
                        <p class="p3">// Contant</p>
                        <div class="row">
                            <div class="col-xs-12 col-sm-2">
                                    <a href="#">
                                            <span class="glyphicon glyphicon-earphone"></span>
                                    </a>
                            </div>
                            <div class="col-xs-12 col-sm-6">
                                    <p>500 345 242</p>
                            </div>
                        </div>
                        <div class="row">
                                <div class="col-xs-12 col-sm-2">
                                        <a href="#">
                                                <span class="glyphicon glyphicon-earphone"></span>
                                        </a>
                                </div>
                                <div class="col-xs-12 col-sm-6">
                                        <p>office@kamsolutions.pl</p>
                                </div>
                        </div>
                        <div class="row">
                                <div class="col-xs-12 col-sm-2">
                                        <a href="#">
                                                <span class="glyphicon glyphicon-earphone"></span>
                                        </a>
                                </div>
                                <div class="col-xs-12 col-sm-6">
                                        <p>Twitter<br>https://twitter.com/WordPress</p>
                                </div>
                        </div>
                        <div class="row">
                                <div class="col-xs-12 col-sm-2">
                                        <a href="#">
                                                <span class="glyphicon glyphicon-earphone"></span>
                                        </a>
                                </div>
                                <div class="col-xs-12 col-sm-6">
                                        <p>Facebook<br> https://www.facebook.com/facebook</p>  
                                </div>
                        </div>
                        <div class="row">
                                <div class="col-xs-12 col-sm-2">
                                        <a href="#">
                                                <span class="glyphicon glyphicon-earphone"></span>
                                        </a>
                                </div>
                                <div class="col-xs-12 col-sm-6">
                                        <p>Skype<br> kamsolutions.pl</p>
                                </div>
                        </div>
                    </div>
                    <div class="left">
                        <p class="p3">// Skills</p>
                            <div class="row">
                                <div class="box">
                                   <ul>
                                       <li>HTML</li>
                                       <li>CSS</li>
                                       <li>jQuery</li>
                                       <li>PHP</li>
                                       <li>Laravel 2(framework)</li>
                                   </ul>
                                </div>
                                <div class="box">
                                   <ul>
                                        <li>Beginner</li>
                                        <li>Proficient</li>
                                        <li>Expert</li>
                                        <li>Master</li> 
                                   </ul> 
                                </div>
                            </div>
                    </div>
                    <div class="left">
                        <p class="p3">// Languages</p>
                        <div>
                            <div class="row">
                                <ul>
                                    <li>
                                        <br>
                                   <div class="col-xs-12 col-sm-4"> Polish</div>
                                <div class="col-xs-12 col-sm-6">
                                        <span class="glyphicon glyphicon-star"></span>
                                        <span class="glyphicon glyphicon-star"></span>
                                        <span class="glyphicon glyphicon-star"></span>
                                        <span class="glyphicon glyphicon-star"></span>
                                        <span class="glyphicon glyphicon-star"></span>
                                </div>
                                   </li>
                                </ul>
                            </div>
                        </div>
                        <div>    
                            <div class="row">
                                <ul>
                                    <li>
                                        <br>
                                    <div class="col-xs-12 col-sm-4">English</div>
                                    <div class="col-xs-12 col-sm-6">
                                         <span class="glyphicon glyphicon-star"></span>
                                         <span class="glyphicon glyphicon-star"></span>
                                         <span class="glyphicon glyphicon-star"></span>
                                         <span class="glyphicon glyphicon-star"></span>
                                         <span class="glyphicon glyphicon-star"></span>
                                    </div>
                                    </li>
                                </ul>
                            </div>
                        </div>   
                            
                    </div>
                    <div class="left">
                        <p class="p3">// Hobbies</p>
                            <div class="row">
                                <ul>
                                <li>
                                <div class="hob">
                                        <p><span class="glyphicon glyphicon-heart-empty"></span>Photography</p>
                                </div>
                                </li>
                                <li>
                                <div class="hob">
                                        <p><span class="glyphicon glyphicon-heart-empty"></span>Fitness</p>
                                </div>
                                </li>
                                <li>
                                <div class="hob">
                                        <p><span class="glyphicon glyphicon-heart-empty"></span>Programming</p>
                                </div>
                                </li>
                                </ul>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>